<template>
  <div class="goodsEdit">
    <h1 class="mb-3">{{ id ? "编辑" : "新建" }}充值方式</h1>
    <el-form label-width="110px" :model="form" :rules="rules" ref="form" @submit.native.prevent="save('form')">
      <el-form-item label="标题" prop="title" class="w50">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="商品所属类别" prop="cateValue" class="w50">
        <el-cascader
          ref="cascaderCate"
          v-model="form.cateValue"
          :options="options"
          clearable
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详情" prop="detail" class="w90">
        <Tinymce ref="editor" v-model="form.detail" :height="200" />
      </el-form-item>

      <el-form-item label="商品下单状态">
        <el-radio-group v-model="form.orderState">
          <!-- <el-radio label="0">正常</el-radio> -->
          <el-radio label="1">关闭下单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
export default {
  props: ["id"],
  components: {
    Tinymce,
  },
  data() {
    return {
      value: [],
      options: [
        {
          value: "pay",
          label: "充值说明",
        },
      ],
      form: {
        title: "",
        cateValue: [],
        cateLabel: "",
        detail: "",
        orderState: "1",
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
        ],
        cateValue: [{ required: true, message: "请选择商品所属类别", trigger: "change" }],
        detail: [{ required: true, message: "请填写详情", trigger: "blur" }],
      },
    };
  },
  created() {
    this.id && this.fetch();
  },
  beforeCreate() {
    // 激活富文本编辑
    this.$store.commit("ActiveEditor");
  },
  methods: {
    handleChange(value) {
      // console.log(value);
      const labelList = [];
      const checkedLabels = this.$refs["cascaderCate"].getCheckedNodes();

      checkedLabels.forEach(function(item) {
        if (!item.hasChildren) {
          labelList.push(item.label);
        }
      });
      // this.form.cateLabel = value.join(",");
      this.form.cateLabel = labelList.join(",");
      // this.form.cateValue = labelList;
      // console.log(this.form.cateLabel);
    },
    save(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res;
          if (this.id) {
            res = await this.$http.post("/api/payList/edit", this.form);
          } else {
            res = await this.$http.post("/api/payList/save", this.form);
          }
          if (res.data.meta.code === 0) {
            this.$message.success("保存成功");
            this.$router.push("/pay/list");
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    async fetch() {
      const { data: res } = await this.$http.post("/api/payList/getByID", { id: this.id });
      if (res.meta.code === 0) {
        this.form = res.data.pay;
      }
    },
  },
};
</script>

<style lang="scss">
.goodsEdit {
  padding-bottom: 50px;
  .el-cascader-menu__wrap {
    height: 180px !important;
  }
}
</style>
